<template>
	<view class="container">
		<view class="intro">
			<image style="border-radius: 50%;" src="http://wx.qlogo.cn/mmopen/vi_32/GcU2Y11PqmP7hibtLvreFKlSiaEN2XWXrgVTPn3JYgFvP042HTd0VMM8ib5hxaI8GyBr3BaiawI7q2PnkEA4OBhNfOzEQOzfJIun5DGwvTDAeXg/132"></image>
			<view class="tips">
				一杯好茶，一口软欧包
				<br>
				在奈雪遇见两种美好
			</view>
		</view>
		<view class="bottom">
			<!-- #ifdef H5 -->
			<button type="primary" size="default" class="login-btn" @tap="login">
				登录
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button type="primary" size="default" class="login-btn" open-type="getUserInfo" lang="zh_CN"
				@getuserinfo="getUserInfo">
				<image src="/static/images/mine/wechat.png"></image>
				微信一键登录
			</button>
			<!-- #endif -->
			<view class=" text-center" style="height: 30vh;">
				<view class="adbb">新用户登录即加入会员，享会员权益</view>
				<view class="wocc row">
					<view class="grid">
						<image src="/static/images/customer-level/5.png"></image>
						<view>入会有礼</view>
					</view>
					<view class="grid">
						<image src="/static/images/customer-level/1.png"></image>
						<view>积分兑换</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/level.png"></image>
						<view>升级特权</view>
					</view>
					<view class="grid">
						<image src="/static/images/customer-level/3.png"></image>
						<view>生日特权</view>
					</view>
					<view class="grid">
						<image src="/static/images/customer-level/10.png"></image>
						<view>奈雪宝藏</view>
					</view>
				</view>
				<view class="hy">会员权益说明</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// import Member from '@/api/member'
	// import {mapMutations} from 'vuex'
	import { userInfo } from '@/stores/userInfo'
	let UserInfo = userInfo()
	// export default {
	// 	data() {
	// 		return {

	// 		}
	// 	},
	// 	methods: {
			// ...mapMutations(['SET_MEMBER']),
		let	 getUserInfo =(e) =>{
				
					console.log(e.detail,"一键登录")
				uni.showLoading({title: '加载中'})
				
				const {errMsg, userInfo} = e.detail
				if(errMsg !== "getUserInfo:ok") {
					uni.showModal({
						title: '提示',
						content: '您取消了授权登录，请重新授权',
						showCancel: false
					})
					}
				UserInfo.userRegister({
					avatarUrl:userInfo.avatarUrl,
					nickname:userInfo.nickName,
					wxLoginCode:hashString(userInfo.nickName+2025)
					
				})
				
				// console.log(userInfo,"一键登录1213131")
				
				
				uni.setStorageSync('userOrderAddress',{})
				// uni.navigateBack()
				setTimeout(() => {
				 uni.switchTab({
				 	url: '/pages/mine/mine'
				 });
				}, 1000); // 2000毫秒 = 2秒
				
				
				
				// setTimeout(function () {
				// 	uni.hideLoading();
				// }, 4000);
				
				}
				
				
		// 简单的字符串哈希函数（模拟微信 code 的生成规则）
		let  hashString =(str, length = 24)=> { // length 参数控制输出长度，默认为 24
		    let hash = 0;
		    if (str.length === 0) return hash.toString();
		
		    // 第一步：计算基础哈希值
		    for (let i = 0; i < str.length; i++) {
		        const char = str.charCodeAt(i);
		        hash = (hash << 5) - hash + char;
		        hash |= 0; // 转换为 32 位整数
		    }
		
		    // 第二步：扩展哈希值长度
		    let extendedHash = Math.abs(hash).toString(36); // 初始哈希值
		    while (extendedHash.length < length) {
		        // 将初始哈希值与自身拼接或再次哈希以扩展长度
		        hash = (hash * 31 + str.length) | 0; // 添加额外的复杂性
		        extendedHash += Math.abs(hash).toString(36);
		    }
		
		    // 第三步：截取指定长度
		    return extendedHash.slice(0, length);
		}
				

	// 			// 	//没有授权登录就用默认的用户信息
	// 			// 	this.SET_MEMBER(Member)
	// 			// 	uni.navigateBack()

	// 			// 	return
	// 			// } else {
	// 			// 	const {avatarUrl: avatar, city, country, gender, nickName: nickname, province} = userInfo
	// 			// 	const member = Object.assign(Member, {avatar, city, country, gender, nickname, province})
	// 			// 	this.SET_MEMBER(member)

	// 			// 	uni.navigateBack()
	// 			// }
	// 		},
	// 		login() {
	// 			// this.SET_MEMBER(Member)
	// 			// uni.navigateBack()
	// 		}
	// 	}
	// }
</script>

<style lang="scss" scoped>
	.intro {
		width: 100%;
		height: 60vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		font-size: 14px;
		color: #919293;

		image {
			width: 165rpx;
			height: 165rpx;
		}

		.tips {
			line-height: 72rpx;
			text-align: center;
		}
	}

	.bottom {
		height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 40rpx;

		.login-btn {
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			background-color: #52b3ff;
			color: #ffffff;
			font-size: 28rpx;

			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.row {
			.grid {
				width: 20%;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}

			width: 100% !important;
			color: #919293;
			font-size: 24rpx;
			align-items: center;
			justify-content: space-around;
			display: flex;
			box-sizing: border-box;
			margin-top: 30px;
		}

		.hy {
			color: #52b3ff;
			font-size: 28rpx;
			box-sizing: border-box;
			margin-top: 40px;
		}

		.text-center {
			height: 30vh;
			// display: flex;
			text-align: center !important;
			align-items: center;
			justify-content: space-evenly !important;
			flex-direction: column !important;
			box-sizing: border-box;
			margin-top: 50px;

			.adbb {
				width: 100% !important;
				color: #919293;
				font-size: 28rpx;
				box-sizing: border-box;
			}

		}
	}
</style>